<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { getMemberOrderAPI, getPayMockAPI, getPayWxPayMiniPayAPI } from './request'
import type { OrderItem } from '@/types/order'
import { onReady, onLoad } from '@dcloudio/uni-app'
import { orderStateList } from '@/services/constants'
import { OrderState } from '@/services/constants'
import type { OrderListParams } from '@/types/order'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '全部' },
  { orderState: 1, title: '待付款' },
  { orderState: 2, title: '待发货' },
  { orderState: 3, title: '待收货' },
  { orderState: 4, title: '待评价' },
])
// 获取从其他页面传递过来的参数
const query = defineProps<{
  type: string
}>()
let activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState == Number(query.type)) || 0)
// 切换tab
const onClickTab = (index: any) => {
  activeIndex.value = index
  getOrderList()
}
const orderList = ref<OrderItem[]>([])
const getOrderList = async () => {
  let params: OrderListParams = {
    orderState: activeIndex.value,
    page: 1,
    pageSize: 5,
  }
  const res = await getMemberOrderAPI(params)
  orderList.value = res.result.items
  console.log(orderList.value, 'orderList.value')
}
// 滑动容器
const onChangeSwiper: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}
// 去支付
const onOrderPay = async (id: string) => {
  // 通过环境变量来判断是真实支付还是模拟支付
  if (import.meta.env.DEV) {
    // 开发环境：模拟支付，修改订单状态为已支付
    await getPayMockAPI({ orderId: id })
  } else {
    // 生产环境：获取支付参数 + 发起微信支付
    const res = await getPayWxPayMiniPayAPI({ orderId: id })
    await wx.requestPayment(res.result)
  }
  uni.showToast({ icon: 'success', title: '支付成功' })
  const res = orderList.value.findIndex((item: any) => item.id == id)
  orderList.value[res].orderState = OrderState.DaiShouHuo
}
// 滚动到底部
const onScrolltoLower = () => {
  console.log('滚动到底部了')
}
onLoad(() => {
  getOrderList()
})
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="item in orderTabs"
        :key="item.orderState"
        @tap="onClickTab(item.orderState)"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" @change="onChangeSwiper" :current="activeIndex">
      <!-- 滑动项 -->
      <swiper-item v-for="item in orderTabs" :key="item.orderState">
        <!-- 订单列表 -->
        <scroll-view scroll-y class="orders" @scrolltolower="onScrolltoLower">
          <template v-if="orderList.length >= 1">
            <view class="card" v-for="item in orderList" :key="item.id">
              <!-- 订单信息 -->
              <view class="status">
                <text class="date">{{ item.createTime }}</text>
                <!-- 订单状态文字 -->
                <text>{{ orderStateList[item.orderState].text }}</text>
                <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
                <text class="icon-delete" v-if="item.orderState >= OrderState.DaiPingJia"></text>
              </view>
              <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
              <navigator
                v-for="sku in item.skus"
                :key="sku.id"
                class="goods"
                :url="`/pagesOrder/detail/detail?id=${sku.id}`"
                hover-class="none"
              >
                <view class="cover">
                  <image mode="aspectFill" :src="sku.image"></image>
                </view>
                <view class="meta">
                  <view class="name ellipsis">{{ sku.name }}</view>
                  <view class="type">{{ sku.attrsText }}</view>
                </view>
              </navigator>
              <!-- 支付信息 -->
              <view class="payment">
                <text class="quantity">共{{ item.totalNum }}件商品</text>
                <text>实付</text>
                <text class="amount"> <text class="symbol">¥</text>{{ item.totalMoney }}</text>
              </view>
              <!-- 订单操作按钮 -->
              <view class="action">
                <!-- 待付款状态：显示去支付按钮 -->
                <!-- v-if="item.orderState == orderState.DaiFuKuan" -->
                <template v-if="item.orderState == OrderState.DaiFuKuan">
                  <view class="button primary" @tap="onOrderPay(item.id)">去支付</view>
                </template>
                <template v-else>
                  <navigator
                    class="button secondary"
                    :url="`/pagesOrder/create/create?orderId=${item.id}`"
                    hover-class="none"
                  >
                    再次购买
                  </navigator>
                  <!-- 待收货状态: 展示确认收货 -->
                  <view v-if="item.orderState == OrderState.DaiShouHuo" class="button primary"
                    >确认收货</view
                  >
                </template>
              </view>
            </view>
          </template>
          <!-- 底部提示文字 -->
          <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
            {{ true ? '没有更多数据~' : '正在加载...' }}
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}

// 订单列表
.orders {
  .card {
    min-height: 100rpx;
    padding: 20rpx;
    margin: 20rpx 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;

    &:last-child {
      padding-bottom: 40rpx;
    }
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 15rpx;

    .date {
      color: #666;
      flex: 1;
    }

    .primary {
      color: #ff9240;
    }

    .icon-delete {
      line-height: 1;
      margin-left: 10rpx;
      padding-left: 10rpx;
      border-left: 1rpx solid #e3e3e3;
    }
  }

  .goods {
    display: flex;
    margin-bottom: 20rpx;

    .cover {
      width: 170rpx;
      height: 170rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
      image {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .quantity {
      position: absolute;
      bottom: 0;
      right: 0;
      line-height: 1;
      padding: 6rpx 4rpx 6rpx 8rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 10rpx 0 0 0;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .name {
      height: 80rpx;
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .more {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #333;
    }
  }

  .payment {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 1;
    padding: 20rpx 0;
    text-align: right;
    color: #999;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;

    .quantity {
      font-size: 24rpx;
      margin-right: 16rpx;
    }

    .amount {
      color: #444;
      margin-left: 6rpx;
    }

    .symbol {
      font-size: 20rpx;
    }
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;

    .button {
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20rpx;
      border-radius: 60rpx;
      border: 1rpx solid #ccc;
      font-size: 26rpx;
      color: #444;
    }

    .secondary {
      color: #27ba9b;
      border-color: #27ba9b;
    }

    .primary {
      color: #fff;
      background-color: #27ba9b;
    }
  }

  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }
}
</style>
